<template>
  <div class="login-container">
    <!-- <header>这里放logo</header> -->
    <div class="sectionbox">
      <section class="formbox">
        <nav>欢迎登录</nav>
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          class="demo-ruleForm"
        >
          <el-form-item prop="name" label="请输入账号：">
            <el-input v-model="ruleForm.name" type="text" autocomplete="off" />
          </el-form-item>
          <el-form-item prop="pwd" label="请输入密码：">
            <el-input
              v-model="ruleForm.pwd"
              type="password"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login">登录</el-button>
            <!-- <el-button @click="register">注册</el-button> -->
          </el-form-item>
        </el-form>
      </section>
    </div>
    <!-- <footer>这里是脚</footer> -->
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import { loginApi } from "../../request/api";
import { Cookies } from "../../request/cookie";
import { useStore } from "vuex";
const store = useStore();
const mima = ref("");
const validatorPwd = async (
  rule: any,
  value: string | undefined,
  cb: (msg?: string) => void
) => {
  if (!value || mima.value != "") {
    cb(mima.value || "密码不能为空");
  } else {
    cb();
  }
};
const state = reactive({
  ruleForm: {
    name: "",
    pwd: "",
  },
  rules: {
    name: [{ required: true, message: "用户名不为空", trigger: "blur" }],
    pwd: [
      {
        validator: validatorPwd,
        trigger: "blur",
        required: true,
      },
    ],
  },
});
const { ruleForm, rules } = toRefs(state);
const ruleFormRef = ref();
const router = useRouter();
const login = () => {
  console.log(ruleFormRef.value.validate);
  mima.value = "";
  console.log("login");
  ruleFormRef.value
    .validate()
    .then(() => {
      console.log(ruleForm.value);
      // router.push('/homepage')
      loginApi({
        password: ruleForm.value.pwd,
        username: ruleForm.value.name,
      })
        .then((res) => {
          console.log("res", res);
          if (res.code == 200) {
            router.push("/homepage");
            Cookies.set("yimei_login", res.data.token_type+ ' ' + res.data.token, 7);
            store.dispatch("getAdminInfo").then((res) => {
              router.push("/homepage");
            });
          } else {
            mima.value = "密码错误";
            router.push("/homepage");
          }
        })
        .catch((res) => {
          mima.value = "服务器错误";
        });
    })
    .catch(() => {
      console.log("catch");
    });
};

function async(rule: any, arg1: string, callback: any): any {
  throw new Error("Function not implemented.");
}
// const register = () => {
//   console.log(ruleFormRef.value.validate);
//   router.push("/register");
// };
</script>
<style lang="less" scoped>
@import url("../../style/reset.less");
.captcodeImage {
  width: 150px;
  /*margin-right: 1.5rem;*/
  padding: 0;
  /*margin: 1px 0;*/
  /*font-size: 1.5rem;*/
  height: 100%;
  border-style: none;
  align-content: flex-start;
  border: none;
  outline: medium;
  cursor: pointer;
  border-style: none;
  text-indent: 10px;
}

.goto-login-mobile-input {
  width: 100%;
  margin-right: 1.5rem;
  padding: 0;
  /*margin: 1px 0;*/
  /*font-size: 1.5rem;*/
  height: 100%;
  border-style: none;
  align-content: flex-start;
  border: none;
  outline: medium;
  cursor: pointer;
  border-style: none;
  text-indent: 10px;
}

.loginLine {
  width: 5px;
  height: 26px;
  margin-top: 2px;
  margin-right: 20px;
  margin-left: 70px;
  //   background-image: url("https://lsdkmanager.oss-cn-hangzhou.aliyuncs.com/lsdkzcb/homeLine.png");
  background-size: 100% 100%;
}

.login-container {
  height: 100vh;
  background-color: #141a48;
  margin: 0px;
  overflow: hidden;
  //   height: 100%;
  background-image: url("../../image/login.png");
  background-size: cover;
  background-repeat: no-repeat;
  .formbox {
    width: 300px;
    padding: 20px 20px 0 20px;
    background-color: rgba(246, 246, 246, 0.7);
    border-radius: 20px;
    float: right;
    margin-right: 120px;
    vertical-align: middle;
    margin-top: 70px;
  }
  .login-form {
    position: absolute;
    left: 700px;
    top: 50px;
    right: 0;
    width: 400px;
    padding: 35px 35px 15px 35px;
    padding: 25px 35px 15px 35px;
    margin: 120px auto;
    border: 0px solid gray;
    background: white;
    box-shadow: darkgrey 10px 10px 30px 5px;
  }
}
.el-form-item {
  margin-bottom: 18px;
}
button {
  padding: 8px 15px;
}
nav {
  font-size: 28px;
  color: #000;
  font-weight: bolder;
  margin-bottom: 20px;
}
header {
  height: 80px;
  background: yellow;
  margin-bottom: 20px;
}
footer {
  height: 80px;
  background: yellow;
}
.sectionbox {
  clear: both;
  height: 100vh;
}
</style>
